import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, message, Tag } from 'antd';
import type { SorterResult } from 'antd/es/table/interface';
import React, { useRef, useState } from 'react';
import WithdrawModal from './components/Withdraw';
// import { router } from 'umi';
import type { OwnerFinanceListItem } from './data';
import { exportAllOwner, queryOwnerFinancePageList } from './service';

/* interface State {
 selected?: OwnerFinanceListItem;
 } */

const TableList: React.FC<{}> = () => {
  const [ sorter, setSorter ] = useState<string>('');
  const actionRef = useRef<ActionType>();
  // const [state, setState] = useState<State>({});
  const [ withdrawModal, setWithdrawModal ] = useState<boolean>(false);
  const [ balance, setBalance ] = useState<number>(0);
  const [ currOwner, setCurrOwner ] = useState<string>('');
  const columns: ProColumns<OwnerFinanceListItem>[] = [
    {
      title: '订单号',
            dataIndex: 'id',
      hideInTable: true,
      hideInSearch: true,
    },
    /* {
     title: '费用类型',
     // @ts-ignore
     dataIndex: 'type',
     hideInSearch: true,
     render: (_, record) => {
     if (record.type === 0) {
     return '共享停车';
     }
     return '临时停车';
     },
     }, */
    {
      title: '截止时间',
            dataIndex: 'endTime',
      hideInSearch: true,
    },
    {
      title: '账户类型',
            dataIndex: 'userType',
      valueEnum: {
        1: { text: '业主' },
        4: { text: '组织' },
      },
    },
    {
      title: '业主名称',
            dataIndex: 'ownerName',
      order: 1,
    },
    {
      title: '总计收入',
            dataIndex: 'total',
      hideInSearch: true,
      render: (_, record) => <Tag>{ (record.total / 100.0).toFixed(2) } 元</Tag>,
    },
    {
      title: '累计提现',
            dataIndex: 'withdrawal',
      hideInSearch: true,
      render: (_, record) => <Tag>{ (record.withdrawal / 100.0).toFixed(2) } 元</Tag>,
    },
    {
      title: '期末余额',
            dataIndex: 'balance',
      hideInSearch: true,
      render: (_, record) => <Tag>{ (record.balance / 100.0).toFixed(2) } 元</Tag>,
    },
    {
      // title: '操作',
      title: '操作',
            dataIndex: 'option',
      hideInSearch: true,
      render: (_, record) => (
        <a
          onClick={ () => {
            setBalance(record.balance);
            setCurrOwner(record.ownerId);
            setWithdrawModal(true);
          } }
        >
          提现
        </a>
      ),
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<OwnerFinanceListItem>
        actionRef={ actionRef }
        rowKey='id'
        onChange={ (_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<OwnerFinanceListItem>;
          if (sorterResult.field) {
            setSorter(`${ sorterResult.field }_${ sorterResult.order }`);
          }
        } }
        params={ {
          sorter,
        } }
        tableAlertRender={ () => false }
        request={ (params = {}) => {
          const { current: page, pageSize, ...filter } = params;
          return queryOwnerFinancePageList({ page, pageSize, ...filter });
        } }
        toolBarRender={ () => [
          <Button
            type='primary'
            onClick={ async () => {
              const res = await exportAllOwner();
              if (res.success) {
                const downloadElement = document.createElement('a');
                downloadElement.href = res.downloadUrl;
                downloadElement.download = `${ Date.now() }_export.xls`;
                document.body.appendChild(downloadElement);
                downloadElement.click();
                document.body.removeChild(downloadElement);
                message.success({ content: '导出成功', key: 'export_key' });
                return true;
              }
              message.error({ content: res.message, key: 'export_key' });
              return false;
            } }
          >
            导出数据
          </Button>,
        ] }
        columns={ columns }
        rowSelection={ false }
      />
      { withdrawModal && (
        <WithdrawModal
          balance={ balance }
          currOwner={ currOwner }
          setUnvisible={ () => {
            setWithdrawModal(false);
            actionRef.current?.reload();
          } }
        />
      ) }
    </PageHeaderWrapper>
  );
};

export default TableList;
